import React, { useState, useEffect, useContext, createContext, useReducer, memo, useCallback, useMemo } from 'react'

export default function Test() {
  console.log('Test组件被重新渲染了')
  const [counter, setCounter] = useState(0)
  const [show, setShow] = useState(true)
  const addClick1 = () => {
    setCounter(counter + 1)
  }
  // 1.useCallback用于将组件中函数传递给子组件使用时配合Memo使用
  // 2.点击切换时组件222不会被重新渲染
  const addClick2 = useCallback(() => {
    setCounter(counter + 1)
  }, [counter])
  return (
    <>
      {counter}
      <button onClick={() => setShow(!show)}>切换</button>
      <hr />
      <SonButton addClick={addClick1}>111</SonButton>
      <SonButton addClick={addClick2}>222</SonButton>
    </>
  )
}
const SonButton = memo(props => {
  console.log(props.children + '组件被重新渲染了')
  return <button onClick={props.addClick}>{props.children}</button>
})
